<template>
    <div class="mine-info-setting-container">
        <div class="header-container clearfix mb-10">
            <div class="header-tab-item clearfix">
                <span class="title">编辑资料</span>
            </div>
        </div>
        <div class="mine-main-container">
            <div
                class="avatar-container"
                :style="`
                    background-image: url('${formData?.avatar}');
                `"
            ></div>
            <p class="avatar-tip">点击更换</p>
            <div class="main-form">
                <el-form :model="formData" label-position="left" size="normal">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item class="formItem" label="用户名:">
                                <el-input
                                    class="itemContainer"
                                    maxlength="11"
                                    show-word-limit
                                    v-model="formData.account"
                                ></el-input>
                            </el-form-item>
                            <el-form-item class="formItem" label="性别:">
                                <el-button
                                    type="info"
                                    class="button buttonLeft"
                                    :class="
                                        formData.gender == '男' ? 'active' : ''
                                    "
                                    size="default"
                                    @click="formData.gender = '男'"
                                    >男</el-button
                                >
                                <el-button
                                    type="info"
                                    class="button"
                                    :class="
                                        formData.gender == '女' ? 'active' : ''
                                    "
                                    size="default"
                                    @click="formData.gender = '女'"
                                    >女</el-button
                                >
                            </el-form-item>
                            <el-form-item class="formItem" label="成长等级:">
                                <!-- <el-tag class="ml-2"
                                    >lv.{{ formData.level }}</el-tag
                                > -->
                                <span class="level_box medium">
                                    <i class="lv"></i>
                                    <i
                                        class="lv1"
                                        :style="`background-image:url(https://rs.dance365.com/level_num_${formData.level}@3x.png)`"
                                    ></i>
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item class="formItem" label="生日:">
                                <el-date-picker
                                    v-model="formData.birthday"
                                    type="date"
                                    format="YYYY-MM-DD"
                                    placeholder="选择日期"
                                    style="width: 160px; height: 40px"
                                />
                            </el-form-item>
                            <el-form-item class="formItem" label="城市:">
                                <el-cascader
                                    v-model="formData.city"
                                    :options="cityList"
                                    style="width: 160px; height: 40px"
                                />
                            </el-form-item>
                            <el-form-item class="formItem" label="技能水平:">
                                <el-select
                                    style="width: 160px; height: 40px"
                                    placeholder="请选择"
                                    class="skillContainer"
                                    v-model="formData.skillevel"
                                >
                                    <el-option
                                        v-for="item in skillevelList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                        <!-- <span class="box"></span>
                                        <span
                                            style="
                                                float: right;
                                                color: #7d8090;
                                                font-size: 9px;
                                            "
                                        ></span> -->
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item
                        class="interest"
                        label="兴趣技能:"
                        size="normal"
                    >
                        <div class="interestList">
                            <div
                                class="container"
                                v-for="(item, index) in myAvocationList"
                                :key="item.id"
                            >
                                <span
                                    class="delete"
                                    @click="removeAvocation(index)"
                                    >x</span
                                >
                                <div class="text">{{ item.name }}</div>
                            </div>
                            <el-button
                                @click="openDialog"
                                class="interestBtn"
                                type="info"
                                >请选择</el-button
                            >
                        </div>
                    </el-form-item>
                </el-form>
                <el-button type="danger" class="save" @click="save_userInfo"
                    >保存</el-button
                >
                <div class="diaLogBox">
                    <el-dialog
                        style="height: 700px; width: 1024px"
                        v-model="dialogVisible"
                        @close="concleChange"
                    >
                        <!-- 头部插槽 -->
                        <template #header="{ close, titleId, titleClass }">
                            <div class="my-header">
                                <div class="top">
                                    <p class="title">
                                        选择我的兴趣技能
                                        <span class="count"
                                            >{{ My_copy.length }} / 7</span
                                        >
                                    </p>
                                    <span class="demo">例如舞蹈就选舞种</span>
                                </div>
                            </div>
                        </template>
                        <!-- 搜索区域 -->
                        <div class="form">
                            <!-- form表单 -->
                            <el-form :inline="true" class="form-inline">
                                <el-form-item>
                                    <el-input
                                        class="search_input"
                                        size="large"
                                        v-model="keyword"
                                        placeholder="搜索兴趣技能"
                                    >
                                        <template #prefix>
                                            <el-icon class="el-input__icon"
                                                ><search
                                            /></el-icon>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        @click="searchHandler"
                                        type="default"
                                        plain
                                        size="large"
                                        >搜索
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!-- 已选择 -->
                        <div class="choosed">
                            <div
                                class="container"
                                v-for="(item, index) in My_copy"
                                :key="item.id"
                            >
                                <span
                                    class="delete"
                                    @click="removeInDialog(index)"
                                    >x</span
                                >
                                <div class="text">{{ item.name }}</div>
                            </div>
                        </div>
                        <!-- 推荐列表 -->
                        <div class="others">
                            <p class="sub-title">推荐兴趣技能</p>
                            <div class="recommendList">
                                <el-scrollbar
                                    height="400px"
                                    wrap-class="scrollbar_wrap"
                                >
                                    <div class="scrollbar-flex-content">
                                        <div
                                            class="container recommend"
                                            v-for="item in List_copy"
                                            :key="item.id"
                                            @click="addAvocation(item)"
                                        >
                                            <span
                                                class="choose"
                                                v-show="
                                                    chooseLise.includes(item.id)
                                                "
                                                >O</span
                                            >
                                            <div class="text">
                                                {{ item.name }}
                                            </div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </div>
                        </div>
                        <!-- 底部插槽 -->
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button
                                    @click="concleChange"
                                    style="
                                        width: 130px;
                                        height: 40px;
                                        padding-left: 0px;
                                        padding-right: 0px;
                                    "
                                    >取 消</el-button
                                >
                                <el-button
                                    type="primary"
                                    @click="confirmChange"
                                    style="
                                        width: 130px;
                                        height: 40px;
                                        padding-left: 0px;
                                        padding-right: 0px;
                                    "
                                >
                                    确 定
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// const userInfo = ref({});
import { Calendar, List, Search } from "@element-plus/icons-vue";
import { computed, onMounted, ref } from "vue";
import { useUserInfoStore } from "@/stores/modules/userInfo";
import { useCenter } from "@/stores/modules/center";
import type { avocationList, avocationModel } from "@/api/centerMock/index";
import { ElMessage } from "element-plus";
import { cloneDeep } from "lodash";
const userInfoStore = useUserInfoStore();
const centerStore = useCenter();
// 用户信息
const formData = ref({
    account: "",
    avatar: "",
    avocation: [],
    level: 0,
    moreBackup: {},
    gender: "",
    birthday: "",
    city: "",
    skillevel: "",
});
// 城市列表
const cityList = ref([{}]);
// 初始化表单信息
const initFormData = async () => {
    await userInfoStore.getUserInfo();
    formData.value = userInfoStore.userInfo;
    console.log(formData.value);
};
// 获取城市列表
const initCityList = async () => {
    await centerStore.getCityList();
    cityList.value = centerStore.cityList.map((item: any) => {
        return {
            label: item.provinceName,
            children: item.citys?.map((city: { cityName: string }) => {
                return {
                    label: city.cityName,
                };
            }),
        };
    });
};
// 获取技能等级列表
const skillevelList = ref([{ label: "", value: "" }]);
const initSkillevelList = async () => {
    await centerStore.getSkillLivel();
    skillevelList.value = centerStore.skillevel.map(
        (item: { data: { name: string }; id: string }) => {
            return {
                label: item.data.name,
                value: item.id,
            };
        }
    );
};
// 获取个人爱好列表
const myAvocationList = ref<avocationList>([
    { id: "", groupType: "", name: "" },
]);
const initMyAvocationList = async () => {
    await centerStore.getMyAvocationList();
    myAvocationList.value = centerStore.myAvocationList;
};
// 获取爱好列表
const avocationList = ref<avocationList>([{ id: "", groupType: "", name: "" }]);
const initAvocationList = async () => {
    await centerStore.getAvocationList();
    avocationList.value = centerStore.avocationList;
};
// 计算已选爱好的数组
const chooseLise = computed(() => {
    return My_copy.value.map((item) => item.id);
});
// 打开dialog
const My_copy = ref<avocationList>([{ id: "", name: "", groupType: "" }]);
const List_copy = ref<avocationList>([{ id: "", name: "", groupType: "" }]);
const openDialog = () => {
    // 拷贝一份原数组
    My_copy.value = cloneDeep(myAvocationList.value);
    List_copy.value = cloneDeep(avocationList.value);
    dialogVisible.value = true;
};
// 添加爱好
const addAvocation = (item: avocationModel) => {
    // 去重
    if (chooseLise.value.includes(item.id)) {
        return;
    } else {
        // 判断长度
        if (My_copy.value.length == 7) {
            ElMessage.warning("最多选择七个");
            return;
        }
        My_copy.value.push(item);
    }
};
// 确认修改
const confirmChange = () => {
    myAvocationList.value = My_copy.value;
    ElMessage.success("修改成功");
    keyword.value = "";
    dialogVisible.value = false;
};
// 取消修改
const concleChange = () => {
    keyword.value = "";
    dialogVisible.value = false;
};
// 去除爱好
const removeAvocation = (index: number) => {
    myAvocationList.value.splice(index, 1);
};
// dialog里面的删除
const removeInDialog = (index: number) => {
    My_copy.value.splice(index, 1);
};
// dialog中的搜索
const keyword = ref("");
const searchHandler = () => {
    if (!keyword.value.trim()) {
        List_copy.value = cloneDeep(avocationList.value);
        return;
    }
    let res = avocationList.value.filter((item) =>
        item.name.includes(keyword.value)
    );
    if (res.length) {
        List_copy.value = res;
    } else {
        ElMessage.error("找不到呀");
    }
};
// 保存个人信息
const save_userInfo = () => {
    ElMessage.success("保存成功");
};
onMounted(() => {
    initFormData();
    initCityList();
    initSkillevelList();
    initMyAvocationList();
    initAvocationList();
});

const dialogVisible = ref(false);
</script>

<style scoped lang="less">
// lv
.level_box {
    box-sizing: border-box;
    background: linear-gradient(#ff289b, #ff43d0);
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 0 8px;
    display: inline-block !important;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    margin-left: 4px;
    .lv {
        width: 15px;
        height: 10px;
        background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
    }
    .lv1 {
        background-image: url(https://rs.dance365.com/level_num_1@3x.png);
    }
    i {
        width: 8px;
        height: 10px;
        display: inline-block;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

// 性别单选样式
.button.active {
    background-color: #f93684;
    border-color: #f93684;
    color: white;
}

// tag样式

.container {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    margin: 0 15px 5px 0;
    width: 100px;
    background-color: #fff;
    padding: 0 15px;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    border: 1px solid #eaecf0;
    text-align: center;
    display: flex;
    position: relative;
    font-size: 12px;
    &.recommend {
        margin-top: 16px;
    }
    .delete {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #b1b5c1;
        color: white;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .choose {
        position: absolute;
        display: block;
        border-radius: 50%;
        background-color: #f93684;
        color: white;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
    }
    .text {
        height: 40px;
        line-height: 40px;
        vertical-align: middle;
        margin: 0 15px 5px 0;
    }
}
.clearfix::before,
.clearfix::after {
    display: table;
    content: "";
    clear: both;
}
.header-container {
    border-radius: 4px;
    background-color: #fff;
    position: relative;
    .header-tab-item {
        float: left;
        color: #111;
        font-size: 14px;
        position: relative;
        .title {
            float: left;
            padding: 28px 30px;
            color: #111;
            font-size: 14px;
            position: relative;
        }
    }
}

.mine-main-container {
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    padding: 30px;
    .avatar-container {
        width: 120px;
        height: 120px;
        border-radius: 100%;
        margin: 26px auto 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
        cursor: pointer;
    }
    .avatar-tip {
        color: #7d8090;
        font-size: 14px;
        text-align: center;
        padding: 12px;
        margin: 0;
    }
    .main-form {
        padding: 30px 140px;
        .formItem {
            margin-bottom: 18px;
            /deep/.el-form-item__label {
                font-size: 13px;
                color: #111;
                height: 40px;
                line-height: 40px;
                position: relative;
                padding-left: 20px;
                text-align: left;
                font-weight: 400;
                width: 100px;
            }
            /deep/.el-input__inner {
                width: 160px;
                height: 40px;
            }
            .itemContainer {
                width: 160px;
                height: 40px;
                background-color: #f5f7f9;
                border-color: #eaecf0;
                height: 40px;
                line-height: 40px;
            }
        }

        .interest {
            /deep/.el-form-item__label {
                font-size: 13px;
                color: #111;
                height: 40px;
                line-height: 40px;
                position: relative;
                padding-left: 20px;
                text-align: left;
                font-weight: 400;
                width: 100px;
            }
            .interestList {
                // background: red;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                .container {
                    height: 40px;
                    line-height: 40px;
                    vertical-align: middle;
                    margin: 0 15px 5px 0;
                    min-width: 100px;
                    background-color: #fff;
                    padding: 0 15px;
                    border-radius: 4px;
                    box-sizing: border-box;
                    cursor: pointer;
                    position: relative;
                    border: 1px solid #eaecf0;
                    text-align: center;
                    display: flex;
                    flex-wrap: wrap;
                    position: relative;
                    .delete {
                        position: absolute;
                        display: block;
                        border-radius: 50%;
                        background-color: #ff39bc;
                        color: white;
                        top: -10px;
                        right: -10px;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                    }
                    .text {
                        height: 40px;
                        line-height: 40px;
                        vertical-align: middle;
                        margin: 0 15px 5px 0;
                    }
                }
            }
        }
    }
    .save {
        width: 140px;
        height: 46px;
        margin: 30px auto 0px;
        display: block;
    }

    .diaLogBox {
        /deep/.el-dialog__body {
            padding: 10px 20px;
        }
        .my-header {
            .top {
                .title {
                    font-style: normal;
                    font-size: 18px;
                    .count {
                        color: #b1b5c1;
                        padding-left: 20px;
                    }
                }
                .demo {
                    color: #b1b5c1;
                    margin: 6px 0 0;
                    font-size: 14px;
                }
            }
        }
        .form-inline {
            /deep/.el-input--large .el-input__wrapper {
                padding: 1px 1px;
            }
            /deep/.el-input__inner {
                background-color: #f5f7f9;
                border-color: #eaecf0;
                height: 40px;
                line-height: 40px;
                padding-left: 33px;
            }
            .search_input {
                /deep/.el-input__prefix-inner {
                    background: #f5f7f9;
                    padding-left: 9px;
                }
            }
        }
        .choosed {
            margin-top: 30px;
            display: flex;
        }
        .others {
            .recommendList {
                /deep/.scrollbar_wrap {
                    padding-top: 10px;
                    display: flex;
                }
                .scrollbar-flex-content {
                    display: flex;
                    flex-wrap: wrap;
                }
            }
        }
        .dialog-footer {
            /deep/.el-button--primary {
                color: #fff;
                background-color: #f93684;
                border-color: #f93684;
            }
        }
        :deep(.el-dialog__body .el-dialog__footer) {
            padding-top: 0 !important;
        }
    }
}
</style>
